<template>
  <div>
    <el-scrollbar class="top-scrollbar" :viewStyle="viewStyle" style="width: 100%; height: auto">
      <!-- 滚动条要包裹的内容 -->
      <span v-for="(item, key) in spaceTags" :key="key">
        <el-tag
          size="medium"
          :type="item.type"
          style="cursor: pointer"
          :class="item.class"
          :closable="item.closable"
          :disable-transitions="false"
          @close="handleClose(key)"
          @click="tagActive(key)"
        >
          <span>{{ item.name }}</span>
        </el-tag>
      </span>
    </el-scrollbar>

    <div class="content">111</div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      show: true,
      viewStyle: { "white-space": "nowrap" },
      spaceTags: [{ name: "空间首页", type: "primry", class: "active" }],
      activeIndex: 0,
      editableTabsValue: "2",
      editableTabs: [
        {
          title: "Tab 1",
          name: "1",
          content: "Tab 1 content",
        },
        {
          title: "Tab 2",
          name: "2",
          content: "Tab 2 content",
        },
      ],
      tabIndex: 2,
    };
  },
  watch: {},
  computed: {},
  methods: {
    tagActive(index) {
      this.undoActive();
      this.doActive(index);
    },
    handleClose(index) {
      this.undoActive();
      this.spaceTags.splice(index, 1);
      if (index < this.spaceTags.length - 1) {
        this.doActive(index);
      } else {
        this.doActive(index - 1);
      }
    },
    doActive(index) {
      let item = this.spaceTags[index];
      item.class = "active";
      item.type = "primry";
      this.activeIndex = index;
    },
    undoActive() {
      this.spaceTags[this.activeIndex].class = "";
      this.spaceTags[this.activeIndex].type = "info";
    },
    handleTabsEdit(targetName, action) {
      if (action === "add") {
        let newTabName = ++this.tabIndex + "";
        this.editableTabs.push({
          title: "New Tab",
          name: newTabName,
          content: "New Tab content",
        });
        this.editableTabsValue = newTabName;
      }
      if (action === "remove") {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
      }
    },
  },
  created() {},
  mounted() {
    for (let index = 1; index < 20; index++) {
      this.spaceTags.push({ name: "空间 " + index, closable: true, type: "info", class: "" });
    }
  },
};
</script>
<style lang="scss" scoped>
.top-scrollbar {
  * {
    margin: 5px 2px 15px 0px;
    user-select: none;
  }
  .el-tag {
    border-radius: 0px;
  }
  span {
    font-weight: 500;
  }
  .active::before {
    content: "";
    background: #fa8919;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: relative;
    margin-right: 5px;
  }
  ::v-deep .el-scrollbar__thumb {
    display: none;
  }
}
</style>
